
<template>
  <div class = "galary">
    <ly-tab
      v-model="selectedId"
      :items="items"
      :options="options"
      @change = "handleClick"
      class = "tabColor">
    </ly-tab>
    <div class= "cate">
        <span>全部</span>
        <span>其他</span>
    </div>
    <component 
    :is = "type"
    :imgList = "imgList"
    ></component>
  </div>
</template>

<script>

import galaryContent from './galaryContent'

export default {
  props:{
    galaryList:Array,
    imgList:Array
  },
  name:'detailGalary',
  data () {
    return {
      type:"galaryContent",
      selectedId:0,
      items:[],
      options: {
        activeColor: '#obc071'
      }
    }
  },
  methods:{
      handleClick(item,index){
          this.$store.state.index = index
      }
  },
  components:{
      galaryContent
  },
  computed:{
      loopGalaryList(){
          for(let i = 0; i < this.galaryList.length; i++){
              let item = { label:this.galaryList[i]}
              this.items.push(item)
          }
      }
  },
  mounted(){
      this.loopGalaryList
  }

}
</script>

<style lang = "stylus" scoped>
.galary
  position:absolute
  top:.88rem
  left:0
  right:0
  bottom:0
  color:#fff
  z-index:100
  background:#fff
  .galary>a
    color:#000
  .tabColor
    background:#fff
    border-color:#fff
  .cate
    background:#edf0f5
    line-height:.6rem
    color:#000
  .cate > span
    margin-left:.22rem
    font-size:.3rem
  .wrapper
    background:#fff
    .imgWrapper
      width:47%
      background:red
      margin:.12rem
      float:left
    .imgWrapper > img
      width:100%

</style>